<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>借书管理</title>
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container-fluid {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        .search-container {
            margin-bottom: 20px;
        }
        .search-container input[type="text"] {
            padding: 8px;
            margin-right: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .search-container button {
            padding: 8px 15px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .search-container button:hover {
            background-color: #4cae4c;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .img-thumbnail {
            max-width: 100px;
            height: auto;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h1>借书管理</h1>

    <div class="row">
        <!-- 所有图书列表 -->
        <div class="col-md-4">
            <h2>所有图书</h2>
            <div class="search-container">
                <input type="text" id="bookName" placeholder="书名">
                <input type="text" id="author" placeholder="作者">
                <input type="text" id="category" placeholder="分类">
                <button id="searchButton">搜索</button>
            </div>
            <table class="table table-hover" id="allBooksTable">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>封面</th>
                    <th>库存</th>
                    <th>借出次数</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 图书列表将通过AJAX动态加载 -->
                </tbody>
            </table>
        </div>



    </div>
</div>

<script>

    $(document).ready(function() {
        // 加载和显示图书列表的函数

        function loadBooks() {
            $.ajax({
                url: '/api/v1/books',
                type: 'GET',
                success: function(books) {
                    var table = $('#allBooksTable > tbody');
                    table.empty(); // 清空原有数据
                    $.each(books, function(index, book) {
                        table.append(
                            '<tr>' +
                            '<td>' + book.bookName + '</td>' +
                            '<td>' + book.author + '</td>' +
                            '<td><img src="' + book.bookPhoto + '" alt="封面" class="img-fluid img-thumbnail" style="max-width: 100px;"></td>' +
                            '<td>' + book.totalStock + '</td>' +
                            '<td>' + book.borrowedCount + '</td>' +
                            '<td>' + book.description + '</td>' +
                            '<td><button class="borrow-btn" data-id="' + book.id + '">借书</button></td>' +
                            '</tr>'
                        );
                    });
                },
                error: function() {
                    alert('无法加载图书列表');
                }
            });
        }

        $('#searchButton').click(function() {

            var bookName = $('#bookName').val();
            var author = $('#author').val();
            var category = $('#category').val();
            var searchCriteria = {
                bookName: bookName,
                author: author,
                category: category
            };
            // 发送AJAX请求进行搜索
            $.ajax({
                url: '/api/v1/books/search',
                type: 'GET',
                data: searchCriteria,
                success: function(books) {
                    // 搜索成功，加载搜索结果
                    loadBooks(books);
                },
                error: function() {
                    alert('搜索失败');
                }
            });
        });

        $('#allBooksTable').on('click', '.borrow-btn', function() {
            var bookId = $(this).data('id');
            var urlParams = new URLSearchParams(window.location.search);
            var userId = urlParams.get('id');

            // 发送AJAX POST请求以借书
            $.ajax({
                url: '/api/v1/books/' + bookId + '/borrow',
                type: 'POST',
                data: { userId: userId },
                success: function(response) {
                    alert('借书成功');
                    // 刷新图书列表以显示更新的库存和借出次数
                    loadBooks();
                },
                error: function(xhr) {
                    alert('借书失败: ' + xhr.responseText);
                }
            });
        });

    });

</script>
</body>
</html>